<template>
<div>
  <TopTitle :title="!customer?'预约详情':'预约凭证'" />
  <div v-if="detailShow" class="detailForm">
    <el-form ref="form" :model="form" label-width="93px" class="subcribeForm">
      <el-card class="clearfix">
        <div slot="header">
          <span class="clearSpan">基本信息</span>
        </div>
        <div class="examineIcone">
            <img v-if="form.status == 0" width="142" height="114" src="../../assets/wait.png" alt="待审核">
            <img v-else-if="form.status == 1" width="142" height="114" src="../../assets/pass.png" alt="已通过">
            <img v-else-if="form.status == 2" width="142" height="114" src="../../assets/reject.png" alt="拒绝">
            <img v-else-if="form.status == 9" width="142" height="114" src="../../assets/leave.png" alt="已离开">
            <img v-else-if="form.status == 8" width="142" height="114" src="../../assets/noleave.png" alt="未离开">
        </div>
        <el-form-item label="来 访 时 间">
          <el-date-picker
            v-model="form.visitTime"
            readonly
            type="datetime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截 止 时 间">
          <el-date-picker
            v-model="form.leaveTime"
            type="datetime"
            readonly>
          </el-date-picker>
        </el-form-item>
        <div v-if="customer">
          <el-form-item label="被访人手机">
            <el-input v-model="form.contactNumber" readonly></el-input>
          </el-form-item>
          <el-form-item label="被访人姓名">
            <el-input v-model="form.contacts" readonly></el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="访客手机">
            <el-input v-model="form.tel" readonly></el-input>
          </el-form-item>
          <el-form-item label="访客姓名">
            <el-input v-model="form.fullName" readonly></el-input>
          </el-form-item>
          <el-form-item label="访客单位">
            <el-input v-model="form.affiliatedUnits" readonly></el-input>
          </el-form-item>
        </div>
        <el-form-item label="拜 访 事 由">
          <el-input v-model="form.subjectMatter" readonly></el-input>
        </el-form-item>
      </el-card>
      <el-card class="clearfix otherClearfix" v-if="otherList.length > 0">
        <div slot="header" class="headerOpr">
          <span class="clearSpan">随访人员</span>
          <p @click="otherUser = !otherUser">
            <span v-if="!otherUser">
              <i class="el-icon-arrow-down"></i>展开
            </span>
            <span v-else>
              <i class="el-icon-arrow-up"></i>收起
            </span> 
          </p>
        </div>
        <div v-show="otherUser" class="otherContent">
          <div class="otherUser" v-for="(item,index) in otherList" :key="index">
              <el-form-item label-width="110px" :label="'随访人员姓名'+(index+1)">
                  <el-input v-model="item.fullName" readonly></el-input>
              </el-form-item>
              <el-form-item label-width="110px" :label="'随访人身份证号'+(index+1)">
                  <el-input v-model="item.idCard" readonly></el-input>
              </el-form-item>
          </div>
        </div>
      </el-card>
      <el-card class="clearfix otherClearfix">
        <div slot="header" class="headerOpr">
          <span class="clearSpan">其他信息</span>
          <p @click="otherShow = !otherShow">
            <span v-if="!otherShow">
              <i class="el-icon-arrow-down"></i>展开
            </span>
            <span v-else>
              <i class="el-icon-arrow-up"></i>收起
            </span>         
          </p>
        </div>
        <div v-show="otherShow" class="otherContent">
          <el-form-item label="携带物品">
            <el-input v-model="form.goods" readonly></el-input>
          </el-form-item>
          <el-form-item label="体温">
            <el-input v-model="form.temperature" readonly></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input v-model="form.licensePlate" readonly></el-input>
          </el-form-item>
          <div class="uploadImg">
            <div class="uploadItem">
              <p>健康码</p>
              <div class="avatar-uploader">
                  <img v-if="form.healthCode" :src="form.healthCode" alt="上传" class="avatar">
                  <img v-else src="../../assets/defultImg.png" alt="上传">
              </div>
            </div>
            <div class="uploadItem">
              <p>行程码</p>
              <div class="avatar-uploader">
                  <img v-if="form.travelCode" :src="form.travelCode" alt="上传" class="avatar">
                  <img v-else src="../../assets/defultImg.png" alt="上传">
              </div>
            </div>
            <div class="uploadItem">
              <p>核酸检测</p>
              <div class="avatar-uploader">
                  <img v-if="form.nucleicAcid" :src="form.nucleicAcid" alt="上传" class="avatar">
                  <img v-else src="../../assets/defultImg.png" alt="上传">
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-form>
    <el-form 
      :model="verifyForm" 
      label-width="93px" 
      class="verifyForm" 
      v-if="form.status === '0' && !customer">
      <el-form-item prop="status" label="审核状态">
        <el-radio-group v-model="verifyForm.status">
          <el-radio :label="1">审核通过</el-radio>
          <el-radio :label="2">审核拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="opinion" label="备注">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="verifyForm.opinion">
        </el-input>
      </el-form-item>
      <div style="text-align: center;margin-bottom: 10px;">
        <el-button type="primary" round style="width: 157px;" @click="pushRoute">审核</el-button>
      </div>
    </el-form>
  </div>
  <div class="jurisdiction" v-else>
    <div class="content">
      <p>您还没有任何预约</p>
      <p>
        如需预约，请点击
        <router-link to="/userSubcribe">
          <el-button type="text" style="margin-top: 16px;">预约</el-button>  
        </router-link>
      </p>
    </div>
  </div>
  </div>
</template>

<script>
import { fetchGet, fetchPost } from '../../util';
import { Message } from 'element-ui';
export default {
  components: {
    TopTitle: () => import("../../components/Title")
  },
  data() {
    return {
      form: {
        visitTime: null,
        leaveTime: null,
        contactNumber: '',
        contacts: '',
        subjectMatter: '',
        goods: '',
        temperature: '',
        carNumber: '',
        photo: '',
        imageUrl2: '',
        imageUrl3: '',
        status: ''
      },
      verifyForm: {
        status: 1
      },
      subjectMatterOption: [
        {value: 1, label: "商务洽谈"}
      ],
      otherShow: false,
      otherUser: false,
      otherList: [],
      customer: this.$route?.meta?.title == '我的预约凭证' || false,
      detailShow: true
    }
  },
  mounted() {
    const appointmentId = this.$route.query?.appointmentId;
    const userInfo = sessionStorage.getItem("userInfo") ?? null;
    if(appointmentId==='home') {
      if(userInfo&&JSON.parse(userInfo)?.appointmentId) {
        this.getData(JSON.parse(userInfo)?.appointmentId);
      }else {
        this.detailShow = false;
      }
    }else {
      this.getData(appointmentId);
    }
  },
  methods: {
    getData(id) {
      fetchGet(`/api/customerAppointment/selByAppointmentId?appointmentId=${id}`).then(data=>{
        if(data.code === 0) {
          this.form = data.data;
          const arr = [];
          for(const key in this.form) {
            if(key.indexOf('fullName') > -1 && key !== 'fullName') {
              arr.push(key);
            }
          }
          const arr1 = [];
          arr&&arr.map((item,index) => {
            if(this.form[`fullName${index+1}`]) {
              arr1.push({fullName: this.form[`fullName${index+1}`], idCard: this.form[`idCard${index+1}`]})
            }
          })
          this.otherList = arr1;
        }
      })
    },
    pushRoute() {
      fetchPost("/api/customerAppointment/updateCustomerAppointment", 
      {
        ...this.verifyForm,
        appointmentId: this.$route.query?.appointmentId,
      }).then(data=>{
        if(data?.code === 0) {
          Message({
            message: '审核成功',
            type: 'success'
          });
          this.$router.replace("/toexa");
        }
      })
    }
  }
}
</script>

<style scoped>
  .detailForm {
    margin-top: 46px;
  }
  .subcribeForm {
    margin-bottom: 210px;
  }
  .clearfix{
    margin-bottom: 10px;
  }
  .clearSpan{
    font-weight: bold;
    font-size: 18px;
  }
  .clearSpan::before{
    display: inline-block;
    content: '';
    width: 6px;
    height: 17px;
    background: #1890FF;
    position: relative;
    top: 3px;
    left: -4px;
    border-radius: 2px;
  }
  .examineIcone{
    position: relative;
  }
  .examineIcone img{
    position: absolute;
    top: -60px;
    left: 200px;
    z-index: 2;
  }
  .headerOpr{
    display: flex;
    justify-content: space-between;
  }
  .headerOpr p{
    font-size: 16px;
  }

  .otherUser{
    padding: 15px;
    background: #F5FAFE;
    margin-bottom: 16px;
    position: relative;
  }
  .otherContent{
    padding: 20px;
  }

  .uploadImg{
    display: flex;
    flex-wrap: wrap;
  }

  .uploadItem{
    margin-right: 30px;
    margin-bottom: 15px;
  }

  .uploadImg p{
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 10px;
  }
  
  .avatar {
    width: 101px;
    height: 101px;
    display: block;
  }
  .jurisdiction{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/jurisdiction.png');
    background-size: cover;
    background-position-y: -10px;
    text-align: center;
  }
  .jurisdiction p{
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #666666;
  }
  .content{
    margin-top: 75%;
  }
  .avatar-uploader img{
    width: 101px;
    height: 101px;
  }
  .verifyForm {
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 10px;
    right: 10px;
    padding: 10px;
  }
</style>
